<template>
  <a-select
    style="width: 200px"
    nzAllowClear
    :dropdownMatchSelectWidth="false"
    :dropdownClassName="'ndo-select'"
    :name="name"
    :placeholder="placeHolder"
    :disabled="disabled"
    v-model="selectValue"
    @change="onChange"
    @dropdownVisibleChange="OpenChange"
  >
    <div
      class="container"
      slot="dropdownRender"
      slot-scope="menu"
      style="padding: 5px"
      @change="modelChange"
    >
      <div style="display: flex" @click="search1($event)">
        <a-input type="text" v-model="filterText" style="width: 150px" @click="search1($event)" />
        <g-btn
          style="margin-left: 5px"
          icon="search"
          type="primary"
          @callback="modelChange"
        ></g-btn>
      </div>

      <v-nodes :vnodes="menu" />
    </div>
    <a-select-option v-for="item in selectList" :value="item.id" :key="item.id">{{
      item.name
    }}</a-select-option>
  </a-select>
</template>

<script>
  import AppCompoentBase from '/@/shared/component-base/app-component-base';
  import GBtn from '/@/shared/components/g-btn/index.vue';
  import { debounceTime } from 'rxjs/operators';
  import { Subject } from 'rxjs';

  export default {
    name: 'g-ndo-select',
    mixins: [AppCompoentBase],
    components: {
      GBtn,
      VNodes: {
        functional: true,
        render: (h, ctx) => ctx.props.vnodes,
      },
    },
    props: {
      selectList: {},
      value: {},
      disabled: { default: false },
      name: {},
      placeHolder: {},
    },
    data() {
      return {
        filterText: '',
        selectValue: this.value,
        subject: null,
      };
    },
    created() {
      this.$emit('reload');
    },
    methods: {
      search1(e) {
        e.preventDefault();
        e.stopPropagation();
        return false;
      },

      onChange(val) {
        this.$emit('valueChange', this.selectValue);
      },
      writeValue(obj) {
        this.selectValue = obj;
        this.modelChange();
      },
      modelChange() {
        this.$emit('reload', this.filterText);
      },
      OpenChange(bool) {
        if (!bool) {
          // 关闭时清空搜素条件
          this.filterText = null;
          this.modelChange();
        }
      },
      addItem() {},
    },
  };
</script>

<style scoped></style>
